<template>
    <div class="login flex justify-between">
        <div class="flex-3 flex align-center">
            <div class="mar-l-300">
                <div class="flex">
                    <img :src="logoUrl" class="w-px-45 mar-r-20" />
                    <h1 class="color-main">{{ systemTitle }}</h1>
                </div>

                <div class="mar-t-10 mar-l-5">
                    <h2 style="letter-spacing: 3px">Welcome</h2>
                    <Lines w="45px" :h="4" :bg="mainBgColor" round animated animateClass="rubberBand" />
                </div>
            </div>
        </div>

        <div class="flex flex-1 justify-center align-center mar-r-40">
            <div class="w-100">
                <h1 class="font-bold-normal">登录</h1>

                <div class="mar-t-40">
                    <div class="flex align-center">
                        <SvgIcons iconClass="icon-my" class="mar-r-10 font-18"></SvgIcons>
                        <ku-input v-model="userName" type="text" placeholder="请输入用户名" :w="230" border="none"></ku-input>
                    </div>

                    <Lines :h="1" bg="#e6e6e6" class="mar-t-10"></Lines>
                </div>

                <div class="mar-t-20">
                    <div class="flex align-center">
                        <SvgIcons iconClass="icon-key" class="mar-r-10 font-18"></SvgIcons>
                        <ku-input v-model="password" type="password" placeholder="请输入密码" :w="230" border="none"></ku-input>
                    </div>

                    <Lines :h="1" bg="#e6e6e6" class="mar-t-10"></Lines>
                </div>

                <div class="mar-t-20">
                    <div class="flex justify-between align-center">
                        <div class="flex align-center">
                            <SvgIcons iconClass="icon-vcode" class="mar-r-10 font-18"></SvgIcons>
                            <ku-input v-model="code" type="text" placeholder="请输入验证码" :w="230" border="none"></ku-input>
                        </div>

                        <span>{{ code }}</span>
                    </div>

                    <Lines :h="1" bg="#e6e6e6" class="mar-t-10"></Lines>
                </div>

                <div class="mar-t-20">
                    <ku-button type="system" round @click="login">登录</ku-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Lines from "@/components/Lines"
    import SvgIcons from "@/components/SvgIcons"
    import KuButton from "@/components/KuButton"
    import KuInput from "@/components/KuInput"
    import variables from "@/assets/style/variable.module.scss"
    import Utils from "@/utils/utils"

    import { mapState } from "vuex"

    export default {
        name: "Login",

        components: {
            Lines,
            SvgIcons,
            KuButton,
            KuInput,
        },

        computed: {
            ...mapState({
                systemTitle: state => state.settings.systemTitle,
                logoUrl: state => state.settings.logoUrl,
                isLogin: state => state.user.isLogin
            }),
        },

        data() {
            return {
                // 主题背景色
                mainBgColor: variables.mainBgColor,

                // 用户名
                userName: "admin",

                // 密码
                password: "admin123456",

                // 验证码
                code: "cY25",
            }
        },

        created() {
            if (this.isLogin) {
                Utils.notifyPopUpMsg("warning", "您已登录，请勿重复登录！", "警告", 2000)
                this.$router.push("/")
                return
            }
        },

        methods: {
            // 登录
            login() {
                if (this.userName === "") {
                    Utils.notifyPopUpMsg("warning", "用户名不得为空！", "警告", 2000)
                    return
                }

                if (this.password === "") {
                    Utils.notifyPopUpMsg("warning", "密码不得为空！", "警告", 2000)
                    return
                }

                if (this.code === "") {
                    Utils.notifyPopUpMsg("warning", "验证码不得为空！", "警告", 2000)
                    return
                }

                this.$router.push("/")
            },
        },
    }
</script>

<style scoped>
    .login {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("../assets/images/login_bg.jpg") no-repeat;
        background-size: 100%;
    }
</style>
